<!DOCTYPE html>
<html>
	<head>
		<meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>概况</title>
		<link rel="stylesheet" type="text/css" href="css/main.css" />
	    <script type="text/javascript" src="./js/jquery-1.9.1.js"></script>
		<script type="text/javascript" src="./js/highcharts.js"></script>
		<script type="text/javascript" src="./js/exporting.js"></script>
		<script type="text/javascript" src="./js/common.js"></script>
	</head>
<body>
		<div class="homebox">
			
			<div class="homehead">
				<div class="homeheadmain">
					<div class="homeheadtitle">代理数量</div>
					<div class="homeheadinfo">
						<div id="agentstatistics" style="height: 230px;"></div>
						<div class="agentnum">
							<p style="float: left;width: 50%;">一级代理 : <span id="agent1" style="color: red;"></span></p>
							<p style="float: right;width: 50%;text-align: right;">二级代理 : <span id="agent2" style="color: red;"></span></p>
						</div>
						<div class="clear"></div>
						
						<div class="headbottomnum">
							<p class="headtotal" id="agents" style="color: red;"></p>
							<p class="headagect">代理总数</p>
						</div>
						
					</div>
				</div>
				
				<div class="homeheadmain">
					<div class="homeheadtitle">会员总数</div>
					<div class="homeheadinfo">
						<div class="membersbox" >
							<img src="images/left/adminhead.png" class="membersimg" />
							<p>Total number of members</p>
						</div>
						

						<div class="headbottomnum">
							<p class="headtotal" id="users" style="color: red;"></p>
							<p class="headagect">会员总数</p>
						</div>
						
					</div>
				</div>
				
				<div class="homeheadmain">
					<div class="homeheadtitle">订单数量</div>
					<div class="homeheadinfo">
						<div class="headordernum">
							<p id="order" style="color: red;"></p>
						</div>
						
						<div style="height: 300px;" id="ordernum"></div>
						
					</div>
				</div>
				
				<div class="homeheadmain">
					<div class="homeheadtitle">设备数量</div>
					
					<div class="homeheadinfo">
						<div class="headordernum">
							<p id="device" style="color: red;"></p>
						</div>
						
						<div style="height: 300px;" id="devicenum"></div>
						
					</div>
					
				</div>
				
				<div class="clear"></div>
			</div>
		
			<div class="statistics" id="orderdata">
				
			</div>
			
			
			<div class="statistics" id="devicedata">
				
			</div>
			
		</div>
	</body>
</html>
<script>
	var urls = url + "/admin/chart/index";
	var con = "";
	$.ajax({
		type:'get',
		dataType: 'json',
		async: false,
		url: urls,
		success: function(msg){
			con = msg;
		},
		error: function(){
			alert('请求失败');
		}
	})

	//代理数量
	$("#agent1").html(con.agent.agent1);
	$("#agent2").html(con.agent.agent2);
	$("#agents").html(con.agent.agents);
     
    //会员代理 
    $("#users").html(con.users.users);

	//订单数量
    $("#order").html(con.order.orders);
    
    //设备数量
    $("#device").html(con.device.devices);
	console.log(con.otime);
	console.log(con.omoney);
	console.log(Number(con.omoney))


	/*代理*/
	var chart = null;
	$(function () {
		var num=196
		
	    $('#agentstatistics').highcharts({
	        chart: {
	            plotBackgroundColor: null,
	            plotBorderWidth: null,
	            plotShadow: false,
	            spacing : [10,30 ,10, 30]
	        },
	        title: {
	            floating:true,
	            text: '<p>'+ con.agent.agents +'</p><br><p>代理总数</p>'
	        },
	        tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
	        colors: ['#00B0D9', '#83E3FF', '#2DC0E8'],
	        plotOptions: {
	            pie: {
	                allowPointSelect: true,
	                cursor: 'pointer',
	                dataLabels: {
	                    enabled: false,
	                    format: '<b>{point.name}</b>: {point.percentage:.1f} ',
	                    style: {
	                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
	                    }
	                },
	                point: {
	                    events: {
	                        mouseOver: function(e) {  // 鼠标滑过时动态更新标题
	                            // 标题更新函数，API 地址：https://api.hcharts.cn/highcharts#Chart.setTitle
	                            chart.setTitle({
	                                text: e.target.name+ '\t'+ e.target.y 
	                            });
	                        }
	                 
	                    }
	                },
	            }
	        },
	        series: [{
	            type: 'pie',
	            innerSize: '80%',
	            name: '市场份额',
	            data: [
	               ["一级代理",Number(con.agent.agent1)],["二级代理",Number(con.agent.agent2)]/*,["经理",10.0]*/
	             
	            ]
	        }]
	    }, function(c) {
	        // 环形图圆心
	        var centerY = c.series[0].center[1],
	            titleHeight = parseInt(c.title.styles.fontSize);
	        c.setTitle({
	            y:centerY + titleHeight/2
	        });
	        chart = c;
	    });
	});

/*订单数量统计*/	
var chart = Highcharts.chart('ordernum', {
	    colors: ['#35C4F9'],
	    title:false,
	    subtitle: {
	        text: false
	    },
	    yAxis: {
	        title: {
	            text: false
	        }
	    },
	    legend: {
	        layout: 'vertical',
	        align: 'bottom',
	        verticalAlign: 'middle'
	    },
	    xAxis: {
        categories: [
            '1',
            '2',
            '3',
            '4',
            '5',
            '6',
            '7'
        ]
        
        },
	    series: [{
	        name: '订单数量',
	        data: [Number(con.order.time), Number(con.order.time1), Number(con.order.time2), Number(con.order.time3), Number(con.order.time4), Number(con.order.time5),Number(con.order.time6)]
	    }],
	    responsive: {
	        rules: [{
	            condition: {
	                maxWidth: 500
	            },
	            chartOptions: {
	                legend: {
	                    layout: 'horizontal',
	                    align: 'center',
	                    verticalAlign: 'bottom'
	                }
	            }
	        }]
	    }
	});		
/*订单数量统计end*/

	
/*设备数量统计*/
	var chart = Highcharts.chart('devicenum', {
	    colors: ['#FF4B78', '#35C4F9'],
	    title:false,
	    subtitle: {
	        text: false
	    },
	    yAxis: {
	        title: {
	            text: false
	        }
	    },
	    legend: {
	        layout: 'vertical',
	        align: 'bottom',
	        verticalAlign: 'middle'
	    },
	    xAxis: {
        categories: [
            '1',
            '2',
            '3',
            '4',
            '5',
            '6',
            '7'
        ]   
        },
	    series: [{
	        name: '设备数量',
	        data: [Number(con.device.times), Number(con.device.times1), Number(con.device.times2), Number(con.device.times3), Number(con.device.times4), Number(con.device.times5),Number(con.device.times6)],
	    }],
	    responsive: {
	        rules: [{
	            condition: {
	                maxWidth: 500
	            },
	            chartOptions: {
	                legend: {
	                    layout: 'horizontal',
	                    align: 'center',
	                    verticalAlign: 'bottom'
	                }
	            }
	        }]
	    }
	});
/*设备数量统计end*/


/*订单数据*/

var chart = Highcharts.chart('orderdata', {
    title: {
        text: '订单金额'
    },
    subtitle: {
        text: false
    },
    yAxis: {
        title: {
            text: false
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },
    xAxis: {
        categories: [
            con.otime.times,
            con.otime.time1,
            con.otime.time2,
            con.otime.time3,
            con.otime.time4,
            con.otime.time5,
            con.otime.time6,
            con.otime.time7,
            con.otime.time8
        ]   
    },
    tooltip: {
        shared: true,
        valueSuffix: ' 元'
    },
    series: [{
        name: '订单金额',
        data: [Number(con.omoney.moneys), Number(con.omoney.money1), Number(con.omoney.money2), Number(con.omoney.money3), Number(con.omoney.money4), Number(con.omoney.money5), Number(con.omoney.money6), Number(con.omoney.money7),Number(con.omoney.money8)]
    }],
    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'bottom'
                }
            }
        }]
    }
});



/*订单数据end*/


/*设备激活数据*/

  $('#devicedata').highcharts({
    chart: {
        type: 'areaspline'
    },
    title: {
        text: "在线人数",
         align: 'left'
    },
    legend: {
        layout: 'vertical',
        align: 'center',
        verticalAlign: 'top',
        x: 0,
        y: -5,
        floating: true,
        borderWidth: 1,
        backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
    },
    xAxis: {
        categories: [
            con.otime.times,
            con.otime.time1,
            con.otime.time2,
            con.otime.time3,
            con.otime.time4,
            con.otime.time5,
            con.otime.time6,
        ]   
    },
    yAxis: {
        title: {
            text: false
        }
    },
    tooltip: {
        shared: true,
        valueSuffix: ' 人'
    },
    credits: {
        enabled: false
    },
    plotOptions: {
        areaspline: {
            fillOpacity: 0.5
        }
    },
    series: [{
        name: '在线人数',
        data: [0, 4, 3, 5, 4, 10, 12]
    }]
});


/*设备激活数据end*/



</script>
